<template>
    <view class="container">
       
        <!-- 海报预览区域 -->
        <view class="poster-preview">
            <snapshot mode="view" id="target">
                <view class="poster-content" :style="{
                  background:`url(${image}) no-repeat`,
                  backgroundSize:'100% 100%'
                }">
                    <!-- 中文标题 -->
                    <view class="chinese-title">未至已至</view>
                    <!-- 英文标题 -->
                    <view class="english-title">PERSIST</view>
                    <!-- 描述文本 -->
                    <view class="description">
                        {{ message }}
                    </view>
                    <!-- 底部日期 -->
                    <view class="date-info">
                        <text class="weekday">{{ weekdayInChinese }}</text>
                        <text class="date">{{ formattedDate }}</text>
                    </view>
                </view>
            </snapshot>
        </view>
        <view class="toolbar">
          <tn-button border fontColor="#fff" @tap="cancel" :plain="true">返回</tn-button>
          <tn-button border @tap="save" shape="round">保存与分享</tn-button>
        </view>
    </view>
</template>

<script>
import data from '@/static/data.json';
export default {
    data() {
        return {
            today: new Date(),
            image:'',
            message: '每个人都有潜在的能量，只是很容易：被习惯所掩盖，被时间所遗忘，被惰性所消磨'
        };
    },
    computed: {
        weekdayInChinese() {
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return weekdays[this.today.getDay()];
        },
        formattedDate() {
            const year = this.today.getFullYear();
            const month = String(this.today.getMonth() + 1).padStart(2, '0');
            const day = String(this.today.getDate()).padStart(2, '0');
            return `${year}/${month}/${day}`;
        }
    },
    onLoad() {
        uni.showLoading()
        this.message = data[Math.floor(Math.random() * data.length)].quote;
      //  this.image='https://images.unsplash.com/photo-1741619215920-1db7baf88f6e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MzQ1MzZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDQwNzQ3Mjh8&ixlib=rb-4.0.3&q=80&w=400'
        //return 
        wx.request({
          url:'https://api.unsplash.com/photos/random',
          data:{
            topics:'travel',
            orientation:'portrait',
            client_id:'7bvgmCzx6DzlD3LxXecmugiSneu4fhM1LngHTa1FUcI'
          },
          success:(res)=>{
            this.image=res.data.urls.small
            uni.hideLoading()
          },
          fail:()=>{
              this.image='https://images.unsplash.com/photo-1741619215920-1db7baf88f6e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MzQ1MzZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDQwNzQ3Mjh8&ixlib=rb-4.0.3&q=80&w=400'
          }
        })
    },
    methods: {
        cancel(){
            uni.redirectTo({
                url:"/pages/index/index"
            });
        },
        save() {
            this.createSelectorQuery()
                .select('#target')
                .node()
                .exec((res) => {
                    const node = res[0].node;
                    node.takeSnapshot({
                        type: 'file',
                        format: 'png',
                        success: (res) => {
                            wx.showShareImageMenu({
                                path: res.tempFilePath,
                                success: () => {},
                                fail: (res) => {
                                    console.log('fail', res);
                                    if (res.errMsg.indexOf('fail auth deny') != -1) {
                                        uni.showModal({
                                            title: '提示',
                                            content: '需要您授权保存相册',
                                            success: (res) => {
                                                if (res.confirm) {
                                                    uni.openSetting({
                                                        success: (res) => {
                                                        
                                                            if (res.authSetting['scope.writePhotosAlbum']) {
                                                                this.save()
                                                            } else {
                                                                uni.navigateBack();
                                                            }
                                                        },
                                                        fail: (res) => {
                                                            uni.navigateBack();
                                                        }
                                                    });
                                                } else if (res.cancel) {
                                                    uni.navigateBack();
                                                }
                                            }
                                        });
                                    } else {
                                        uni.navigateBack();
                                    }
                                }
                            });
                        },
                        fail(res) {
                            console.log(res);
                            debugger;
                        }
                    });
                });
        },
        handleEdit() {
            // 处理编辑功能
            uni.showToast({
                title: '编辑功能开发中',
                icon: 'none'
            });
        },
        handleSave() {
            uni.showLoading({
                title: '保存中...'
            });
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                });
            }, 1500);
        },
        handleShare() {
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
        }
    }
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "test";
  src: url("https://wximg.qq.com/cityservices/font/FZFWQingYinTiJWD.TTF");
}
.main-menu,.checkin-menu {

    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    border-radius: 8rpx;
    position: fixed;
   
   
    color: $brand-color;
    font-size: 40rpx;
}
.main-menu{
    right: 10px;
}
.checkin-menu {
    width: 80rpx;
    left: 10rpx;
    top:calc(12rpx + env(safe-area-inset-top));
}
.container {
    min-height: 100vh;
    background-color: #000;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header {
    padding: 40rpx 30rpx;
    .title {
        color: #ffffff;
        font-size: 36rpx;
        font-weight: 500;
    }
}

.poster-preview {
    flex: 1;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .poster-content {
        width: 650rpx;
        height: 1000rpx;
        border-radius: 0;
        padding: 40rpx;

        position: relative;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);

        .chinese-title {
            color: #f8f8f8;
            font-size: 64rpx;
            font-weight: bold;
            font-family: test;
            margin-top: 60rpx;
        }

        .english-title {
            color: rgba(255,255,255,.2);
            font-size: 120rpx;
            font-weight: 900;
            letter-spacing: 4rpx;
            margin-top: 20rpx;
            opacity: 0.9;
        }

        .description {
            color: #fbfbfb;
            font-size: 32rpx;
            line-height: 1.8;
            position: absolute;
            padding: 0 20rpx;
            bottom: 200rpx;
            right: 100rpx;
            left: 20rpx;
            font-family: serif;
            font-weight: 900;
            text-shadow: 4px 4px 2px black;
        }

        .date-info {
            position: absolute;
            bottom: 40rpx;
            right: 40rpx;
            display: flex;
            flex-direction: column;

            align-items: flex-end;
            .weekday {
                color: #ffffff;
                font-size: 32rpx;
                margin-bottom: 10rpx;
            }

            .date {
                font-family: monospace;
                font-size: 24rpx;
                background: #fff;
                color: #000;
                font-weight: 500;
                padding: 5px;
            }
        }
    }
}

.toolbar {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
</style>
